<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>个人简历</title>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <!--导入需要的CSS-->
    <link charset="utf-8" type="text/css" rel="stylesheet" href="css/reset.min.css"/>
    <link charset="utf-8" type="text/css" rel="stylesheet" href="css/swiper.min.css"/>
    <link charset="utf-8" type="text/css" rel="stylesheet" href="css/animate.css"/>
    <link charset="utf-8" type="text/css" rel="stylesheet" href="css/index.css"/>

    <!--计算REM-->
    <script type="text/javascript">
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 640 * 100 + 'px';
    </script>
</head>
<body>
<!--LOADING-->
<section class="loading" id="loading">
    <div class="title">
        <h2>移动端个人简历</h2>

        <h3>Loading...</h3>
    </div>
    <div class="progress">
        <div class="progressBox"></div>
    </div>
</section>

<!--ENTER-->
<section class="enter" id="enter">
    <div class="button">
        <div class="touch"></div>
    </div>
</section>

<!--CUBE-->
<section class="cube" id="cube">
    <ul class="cubeBox">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <div class="tip"></div>
</section>

<!--SWIPER-->
<section class="swiper" id="swiper">
    <div class="return"></div>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <!--个人简介-->
            <div class="swiper-slide page1">
                    <p>
                        姓名：<br/>
                        <span>孙基蜓</span>
                    </p>

                    <p>
                        出生年月：<br/>
                        <span>1993年10月</span>
                    </p>

                    <p>
                        学历：<br/>
                        <span>本科</span>
                    </p>

                    <p>
                        简单介绍：<br/>
                        <span>本人是一名有巨大潜力的前端工程师，虽然进入前端这个行业的时间并不长，但是我却有信心在以后迅速成为一名高技术攻城狮。</span>
                    </p>
                </div>

            <!--工作技能-->
            <div class="swiper-slide page2">
                <h2>工作技能</h2>

                <div class="box">
                    <img src="img/course.png" alt=""/>
                    <img src="img/course1.png" alt=""/>
                    <img src="img/course2.png" alt=""/>
                    <img src="img/course3.png" alt=""/>
                    <img src="img/course4.png" alt=""/>
                    <img src="img/course5.png" alt=""/>
                    <img src="img/course6.png" alt=""/>
                </div>
            </div>

            <!--联系方式-->
            <div class="swiper-slide page3">
                <h2>联系方式</h2>

                <ul class="concat">
                    <li>
                        <div class="icon"></div>
                        <div class="textCon">
                            <span>150-548-999-53</span>
                        </div>
                    </li>
                    <li>
                        <div class="icon"></div>
                        <div class="textCon">
                            <span>846523689</span>
                        </div>
                    </li>
                    <li>
                        <div class="icon"></div>
                        <div class="textCon">
                            <span>846523689@qq.com</span>
                        </div>
                    </li>
                </ul>
                </ul>
            </div>

            <!--自我评价-->
            <div class="swiper-slide page4">
                <h2>
                    <span>自我评价</span>
                </h2>

                <p>本人于2015年接触前端，出于对前端的热爱从而学习前端。<br/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 性格上我是一个很乐观的人，注重细节。<br/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我认为个人优势在于可以在较短的时间内学会新的东西，善于汲取他人优秀的东西，并且经过总结和调整进而提高自己。深度互联网爱好者，对互联网保持高度的敏感性和关注度，贴近用户。熟悉移动端；产品心强；</p>
            </div>

            <!--教育经历-->
            <div class="swiper-slide page5">
                <p>
                    大学：2012.9-2016.6<br/>
                    <span>青岛工学院</span>
                </p>

                <p>
                    学习经历：2015.7-2015.10<br/>
                    <span>北京珠峰高级js课程培训班</span>
                </p>
            </div>

            <!--兴趣爱好-->
            <div class="swiper-slide page6">
                <h2>
                    <span>兴趣爱好</span>
                </h2>
                <ul class="concat">
                    <li>
                        <div class="icon"></div>
                        <div class="textCon">
                            <span>篮球就是我的最爱</span><br/>
                            <span>资深NBA球迷十年以上</span><br/>
                            <span>喜欢体育相关的，平时比较关注NBA</span>
                        </div>
                    </li>
                    <li>
                        <div class="textCon1">
                            <span>下面就是常去的地方啦</span>
                        </div>
                    </li>
                </ul>
                <img src="img/basketballCourt.jpg"/>
            </div>
        </div>
    </div>
</section>

<!--导入需要的JS-->
<script charset="utf-8" type="text/javascript" src="js/zepto.min.js"></script>
<script charset="utf-8" type="text/javascript" src="js/swiper.min.js"></script>
<script charset="utf-8" type="text/javascript" src="js/makisu.min.js"></script>
<script charset="utf-8" type="text/javascript" src="js/index.js"></script>
</body>
</html>